<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数字人测试</title>
    <link rel="stylesheet" href="/public/font/iconfont.css" />
    <style>
      body {
        --trajectory_time: 1s;
        --trajectory_scale: 1s;
      }
      .like-box {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #ddd;
        position: relative;
        top: 360px;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 300px;
        cursor: pointer;
      }

      .like-box i {
        font-size: 25px;
      }

      .like-box div {
        position: absolute;
        width: 48px;
        height: 48px;
        /* background-image: url("./public/images/bg1.png"); */
        background-size: cover;
        z-index: -1;
      }

      /* div.release {

      animation: upward 1s linear forwards,
        scale 1s linear forwards,
        opacity 1s linear forwards,
        swing 1s linear forwards;
    } */

      .face1 {
        background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face1.png");
      }

      .face2 {
        background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face2.png");
      }

      .face3 {
        background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face3.png");
      }

      .face4 {
        background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face4.png");
      }

      .face5 {
        background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face5.png");
      }

      .face6 {
        background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face6.png");
      }

      .trajectory1 {
        animation: swing_1 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory2 {
        animation: swing_2 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory3 {
        animation: swing_3 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory4 {
        animation: swing_4 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory5 {
        animation: swing_5 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory6 {
        animation: swing_6 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory7 {
        animation: swing_7 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory8 {
        animation: swing_8 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory9 {
        animation: swing_9 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory10 {
        animation: swing_10 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      .trajectory11 {
        animation: swing_11 var(--trajectory_time) linear forwards,
          scale var(--trajectory_scale) linear forwards,
          opacity var(--trajectory_time) linear forwards;
      }

      @keyframes swing_11 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: -10px;
        }

        100% {
          left: -18px;
        }
      }

      @keyframes swing_10 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: -20px;
        }

        100% {
          left: -20px;
        }
      }

      @keyframes swing_9 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: 10px;
        }

        100% {
          left: 10px;
        }
      }

      @keyframes swing_8 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: 20px;
        }

        100% {
          left: 20px;
        }
      }

      @keyframes swing_7 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: 1px;
        }

        75% {
          left: 2px;
        }

        100% {
          left: 3px;
        }
      }

      @keyframes swing_6 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: -1px;
        }

        75% {
          left: -2px;
        }

        100% {
          left: -3px;
        }
      }

      @keyframes swing_5 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: -5px;
        }

        75% {
          left: -10px;
        }

        100% {
          left: -20px;
        }
      }

      @keyframes swing_4 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: -5px;
        }

        75% {
          left: 20px;
        }

        100% {
          left: 10px;
        }
      }

      @keyframes swing_3 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: 10px;
        }

        75% {
          left: 20px;
        }

        100% {
          left: -10px;
        }
      }

      @keyframes swing_2 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: 25px;
        }

        75% {
          left: 10px;
        }

        100% {
          left: 5px;
        }
      }

      @keyframes swing_1 {
        0% {
        }

        25% {
          left: 0;
        }

        50% {
          left: 8px;
        }

        75% {
          left: -15px;
        }

        100% {
          left: 15px;
        }
      }
      /* div.scale {
     animation: scale 1s linear forwards, opacity 1s linear forwards;
   } */
      @keyframes scale {
        0% {
          transform: scale(0.3);
        }

        100% {
          transform: scale(1.2);
        }
      }

      @keyframes opacity {
        0% {
          top: 0;
        }

        10% {
          top: -10px;
        }

        75% {
          opacity: 1;
          top: -180px;
        }

        100% {
          top: -200px;
          opacity: 0;
        }
      }
    </style>
  </head>

  <body>
    <!-- <script src="./src/index.js"></script> -->
    <div class="like-box" id="like-box">
      <i class="icon-dianzan iconfont"></i>
    </div>
  </body>
</html>
